<template>
    <div style="width:100%;height:100%;overflow: hidden">
        <div style="width:100%;height:100%;overflow: hidden">
            <m-header :title="Title" :fontSize="'0.7rem'" :textAlign="'center'" :backgroundColor="'#38b035'" :fontColor="'white'" :canteen="true" :hasBack="true" :hasCart="false" :isFood="true">
			</m-header>
            <div style="height:100%;width:100%;position:relative;">
                <div>
                    <img :src="storePromoteImg?storePromoteImg:'static/image/classify/banner.jpg'" style="width:100%" alt="">
                </div>
                <div style="width:100%;height:4rem;overflow:hidden;">
                    <div style="overflow:auto">
                        <ul class="foodsClassifyTwoItemUl">
                            <li @click="changeIndex(index)" class="foodsClassifyTwoItem" v-for="(item, index) in firstFoodsClass" :key="index">
                                <div :class="{'foodsClassifyTwoItemImgBox':true,'chooseImg':chooseIndex==index}">
                                    <img :src="item.imageUrl?item.imageUrl:'static/image/demo2.png'" alt="" class="foodsClassifyTwoItemImg">
                                </div>
                                <p :class="{'foodsClassifyTwoItemName':true,'chooseName':chooseIndex==index}">{{item.className}}</p>
                                <div :class="{'foodsClassifyTwoItemBottom':chooseIndex==index}"></div>
                            </li>
                            
                        </ul>
                    </div>
                </div>
                <div class="outer-box" style="overflow:hidden;height:100%;width: 100%;position:relative;">
                    <div class="content-box" ref="foodsLeftBox">
                        <div class="tab-left-box" :style="{height:foodsLeftBoxHeight+'px'}" v-if="secFoodsClass">
                            <tab-left :titleInfo="secFoodsClass"
                                    :activeIndex=" activeIndex"
                                    @changeClassifyIndex="changeClassifyIndex">
                            </tab-left>
                        </div>

                        <div class="goods-list-box">
                            <page-content
                            v-if="activeSecInfo && activeSecInfo.classCode"
                            :secInfo="activeSecInfo"
                            :activeThrCode="activeThrCode">
                            </page-content>
                        </div>
                    </div>
                </div>

                <div class="foodsNotice" v-if="countWatingNum>0">
                    您有{{countWatingNum}}个待取餐信息，点击这里
                    <span @click="goToFoodsOrders" class="foodsOrdersDetail">查看取餐详情</span>
                    <span @click="closeNotice" class="closeNotice"><i class="njfont" style="font-size:0.5rem">&#xe770;</i></span>
                </div>

                
            </div>
            <div style="width:100%;height:3rem;position: absolute;bottom: 0">
                <div class="purchased"  style="padding: 0;position: absolute;width:100%;height:3rem;z-index: 3">
                    <div class="shopping_cart" >
                        <v-CartShowNum :iconColor="'#444'" :isNewIcon="true" ref="cartIcon"></v-CartShowNum>
                    </div>
                    <div class="foodsPrice">
                        <total-price></total-price>
                    </div>
                </div>
                <div @click="buttonGoToCart" class="aui-btn aui-btn-danger aui-btn-sm" style="padding:0 1rem;height: 100%;bottom: 0;position:absolute;z-index: 3;right: 0;line-height: 3rem;font-size:1rem;border-radius: 0">
                    去餐盘
                </div>
            </div>
        </div>
        <add-cart-animate>
        </add-cart-animate>
    </div>
</template>
<script>
import Header from "../header";
import {mapGetters,mapMutations} from 'vuex';
import AddCartAnimate from '@/real-components/AddCartAnimate/AddFoodCartAnimate.vue';
import axios from "axios";
import TabLeft from './tabLeft';
import PageContent from './PageContent';
import totalPrice from './totalPrice';
import {Toast} from '../../utils/toast.js';
import CartShowNum from "../../real-components/CartShowNum/cartFoodNum.vue";

export default {
    data(){
        return{
            Title:'宁家鲜生',
            chooseIndex:0,
            foodsClassList:null,
            activeIndex: 0,
            firstFoodsClass:null,
            secFoodsClass:null,
            activeSecInfo:null,
            activeThrCode:'',
            storePromoteImg:null, //门店banner图
            countWatingNum:0, //待取餐数量
            foodsLeftBoxHeight:null //左侧tab高度
        }
    },
    components:{
        "m-header": Header,
        "v-CartShowNum": CartShowNum,
        TabLeft,
        PageContent,
        AddCartAnimate,
        totalPrice,
    },
    created(){
        this.initFoodsClassify();
        this.$nextTick(() => {
            this.foodsLeftBoxHeight = this.$refs.foodsLeftBox ? (this.$refs.foodsLeftBox.offsetHeight-this.$refs.foodsLeftBox.getBoundingClientRect().top-80) : 0
        })
    },
    updated() {
      this.$nextTick(() => {
        this.foodsLeftBoxHeight = this.$refs.foodsLeftBox ? (this.$refs.foodsLeftBox.offsetHeight-this.$refs.foodsLeftBox.getBoundingClientRect().top-80) : 0
      })
    },
    computed:{
        ...mapGetters('qxz',[
            "getStoreList"
        ]),
        ...mapGetters('wxh', [
            'sessionId',
            'login',
            'userInfo'
        ])
    },
    watch:{
        activeIndex(index) {
            this.activeSecInfo = this.secFoodsClass[index]
        }
    },
    beforeRouteLeave(to, from, next) {
      var name = from.name;
      this.$store.commit('cjy/SET_RETURN_POS', name);
      next();
    },
    methods:{
        async initFoodsClassify(){
            await this.getStoreOpenStatus();
            this.getFoodsClassList();
            // 获取堂食点餐购物车数据
            this.initCart();

            // this.getCountWatingNum()
        },
        async getFoodsClassList(){ //请求餐点分类数据
            let url = window.api.goods_host+'/goodsClass/queryParishFoodGoodsclassInfo';
            let sessionId = localStorage.getItem('sessionId');
            let config = {
                url,
                method: "get",
                headers: {sessionId},
                params:{
                    enterpriseid:window.api.enterpriseid,
                    enterpriseCode:window.api.enterpriseCode,
                    storeCode:window.api.storeCode,
                }
            }
            await axios(config).then(res=>{
                if(res.status==200&&res.data.returnCode==1){
                    let that = this;
                    this.foodsClassList = res.data.data[0];
                    this.firstFoodsClass = this.foodsClassList.filter(ele => {
                        return ele.level==1
                    });
                    this.secFoodsClass = this.foodsClassList.filter(ele => {
                        return ele.level==2&&ele.classParentCode==that.firstFoodsClass[that.chooseIndex].classCode
                    });
                    this.activeSecInfo = this.secFoodsClass[this.activeIndex];
                }else{
                    Toast({
                        message: '获取分类数据失败',
                        duration: 2000,
                        type: 'fail'
                    });
                }
            }).catch(res=>{
                Toast({
                    message: '获取分类数据失败',
                    duration: 2000,
                    type: 'fail'
                });
            })
        },
        async getStoreOpenStatus(){ //请求门店是否开业
            let url = window.api.base_host+'/baseStore/checkStoreOpen';
            let sessionId = localStorage.getItem('sessionId');
            let that = this;
            let config = {
                url,
                method: "get",
                headers: {sessionId},
                params:{
                    enterpriseCode:window.api.enterpriseCode,
                    storeId:window.api.storeId,
                }
            }
            await axios(config).then(res=>{
                if(res.status==200&&res.data.returnCode==1){
                    that.storePromoteImg = JSON.parse(res.data.data[0].storePromoteImg)[0];
                    that.Title = that.Title + '-' + res.data.data[0].storeName;
                    if(!res.data.data[0].storeOpen){
                        Toast({
                            message: '门店未开启',
                            duration: 2000,
                            type: 'fail'
                        });
                        that.$router.push('/main/home');
                    }
                }else{
                    Toast({
                        message: '获取门店状态失败',
                        duration: 2000,
                        type: 'fail'
                    });
                    that.$router.push('/main/home');
                }
            }).catch(res=>{
                Toast({
                    message: '获取门店状态失败',
                    duration: 2000,
                    type: 'fail'
                });

            })
        },
        changeClassifyIndex(index, data) {
            this.activeIndex = index
        },
        changeIndex(index){
            let that = this;
            this.chooseIndex = index;
            this.activeIndex = 0;
            this.secFoodsClass = this.foodsClassList.filter(ele => {
                return ele.level==2&&ele.classParentCode==that.firstFoodsClass[that.chooseIndex].classCode
            });
            this.activeSecInfo = this.secFoodsClass[this.activeIndex];

        },
        initCart() {
            this.$store.dispatch("lyj/synFoodCart");
        },
        goToFoodsOrders(){
            //跳转订单详情
            this.$router.push({path: 'order', query: {codorderStatuse: 0}})

        },
        getCountWatingNum(){
            //获取订单数量
            if(!this.login){
                return
            }
            let url = window.api.trade_host+'/order/countWatingNum';
            let sessionId = localStorage.getItem('sessionId');
            let that = this;
            let config = {
                url,
                method: "get",
                headers: {sessionId},
            }
            axios(config).then(res=>{
                if(res.status==200&&res.data.returnCode==1){
                    console.log(res.data.data[0],'resres')
                    that.countWatingNum = res.data.data[0];
                }else{
                    
                }
            }).catch(res=>{
                
            })
        },
        closeNotice(){
            this.countWatingNum = 0;
        },
        buttonGoToCart(){
            //去购物车
            this.$refs.cartIcon.goToCart();
        }
    }
}
</script>

<style scoped>
.foodsClassifyTwoItemUl{
    display:flex;
    width: 100%;
    height: 4rem;
    border-bottom: 0.05rem solid #ddd;
}
.foodsClassifyTwoItem{
    display: block;
    min-width: 4rem;
    width: 4rem;
    height: 4rem;
}
.foodsClassifyTwoItemImgBox{
    width: 2.4rem;
    height: 2.4rem;
    margin: 0.2rem auto;
    border: 0.05rem solid transparent;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.foodsClassifyTwoItemImg{
    width: 100%;
    height: 100%;
}
.chooseImg{
    border: 0.05rem solid #ee6337;
}
.foodsClassifyTwoItemName{
    font-size: 0.6rem;
    color:#6b6b6b;
}
.chooseName{
    color:#ee6337;
}
.foodsClassifyTwoItemBottom{
    width: 1rem;
    border-top: 0.05rem solid #ee6337;
    margin: 0 auto;
}
.content-box {
    /*opacity: 0.5;*/
    position: relative;
    width: 100%;
    height: 100%;
    padding-left: 22.9%;
}
.tab-left-box {
    position: absolute;
    left: 0;
    width: 22.9%;
    height: 100%;
    background: rgb(241, 241, 241);
  }

  .goods-list-box {
    width: 100%;
    height: 100%;
    background: white;
    padding-left: 0.3rem;
    /*opacity: 0.7;*/
  }
  .foodsNotice{
      position: absolute;
      top:0;
      background-color: #fff3ee;
      height: 2rem;
      width: 100%;
      border-bottom: 1px solid #ddd;
      line-height: 2rem;
      text-align: left;
      padding-left: 1rem;
      font-size: 0.5rem;
  }
  .foodsOrdersDetail{
      color: #ef5423;
  }
  .closeNotice{
      color:#ef5423;
      position: absolute;
      right: 0.5rem;
      top:0.5rem;
      width: 1rem;
      height: 1rem;
      text-align: center;
      line-height: 1rem;
  }
.purchased {
    height: 3rem;
    background: rgba(255, 255, 255, 0.9);
    overflow: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    display: block;
    border-top: 1px solid #eaeaea;
    z-index: 99;
  }

  .purchased .add_to_cart {
    height: 1.8rem;
    line-height: 1.8rem;
    margin-top: -0.2rem
  }

  .purchased .server_icon {
    float: left;
  }
.shopping_cart {
    position: absolute;
    top: 0;
    left: 0.5rem;
    bottom: 0;

    margin: auto;
    font-size: 1.2rem;
    color: #7c7c7c;
  }
  .foodsPrice{
      position: absolute;
      left: 3.5rem;
      top: 0;
      height: 3rem;
      line-height: 3rem;
      font-size: 1rem;

  }
</style>
